<template>
	<view class="container">
		<view class="u-demo-block__content">
			<u-tabs :list="list6" sticky :activeStyle="{ color: '#3c9cff' }"></u-tabs>
		</view>
		<view class="content">
			<view class="able-time">
				<view class="place-type">
					<view @click="changeCur(0)" :class="'selected' + (curSelected==0 ?' cur-active' : '')">半场</view>
					<view @click="changeCur(1)" :class="'selected' + (curSelected==1 ?' cur-active' : '')">全场</view>
				</view>
				<view class="place">
					<view class="selected">场地</view>
					<view class="selected"> 9:00-12:00</view>
					<view class="selected">14:00-17:00</view>
					<view class="selected">18:00-19:00</view>
				</view>
				<view class="place is-select">
					<view class="selected">1</view>
					<view>0.01</view>
					<view>0.01</view>
					<view>0.01</view>
				</view>
				<view class="place is-select">
					<view class="selected">2</view>
					<view>0.01</view>
					<view>0.01</view>
					<view>0.01</view>
				</view>
				<view class="place is-select">
					<view class="selected">3</view>
					<view>0.01</view>
					<view>0.01</view>
					<view>0.01</view>
				</view>
			</view>
			<view class="selected">选中场次</view>
			<view class="selected-item" :key="index" v-for="(item,index) in selectdInfo">
				<view>{{item.time}}</view>
				<view>{{item.place}}</view>
			</view>
			<u-gap height="5" bgColor="#f4f4f5"></u-gap>
			<view class="selected confirm">确认操作</view>
			<view style="width: 80%; padding-bottom:40rpx;padding-left: 50rpx;" >
				<u-button size="large" shape="circle" type="primary">马上提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "bookTime",
		data() {
			return {
				list6: [{
					name: '11-20(六)'
				}, {
					name: '11-21(日)',
				}, {
					name: '11-22(一)',
				}, {
					name: '11-23(二)'
				}, {
					name: '11-24(三)'
				}],
				curSelected:0,
				selectdInfo:[
					{
						time:"9:00-12:00",
						place:"全场/场地2"
					},
					{
						time:"9:00-12:00",
						place:"全场/场地1"
					}
				]
				
			};
		},
		methods:{
			changeCur(id){
				this.curSelected = id;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F8F8F8;

		.content {
			padding-left: 30rpx;

			.able-time {
				margin-top: 20rpx;

				.place {
					display: flex;
					justify-content: space-between;
					justify-items: center;
					align-items: center;
					padding: 2rpx 10rpx;
					flex-direction: row;
				}
				.place-type{
					height: 100rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					justify-items: center;
					view{
						margin-right: 40rpx;
						width: 140rpx;
						height: 80rpx;
						text-align: center;
						line-height: 80rpx;
						
					}
					.cur-active{
						background-color: #3C9CFF;
						border-radius: 20rpx;
						color: #FFFFFF;
					}
				}

				.is-select {
					view:nth-child(n+2) {
						background-color: #3C9CFF;
						height: 100rpx;
						width: 160rpx;
						margin: 20rpx 0;
						text-align: center;
						line-height: 100rpx;
						padding-right: 20rpx;
						color: white;
					}

					view:nth-child(1) {
						width: 50rpx;
						text-align: center;
					}
				}
			}

			.selected {
				color: #9C9C9C;
			}

			.confirm {
				padding: 20rpx 0;
			}

			.selected-item {
				width: 200rpx;
				height: 100rpx;
				background-color: #3C9CFF;
				text-align: center;
				color: white;
				padding-top: 20rpx;
				border-radius: 20rpx;
				margin: 20rpx;
				display: flex;
				
			}
		}
	}
</style>
